{% extends "template/layout.html" %} {% block content %}
<style>
    .admin_default {
        margin: 20px;
    }

    .layui-body {
        overflow-y: scroll;
    }

    .addBtn {
        float: right;
    }
    .addFrom{
        margin: 20px 20px 20px 5px;
    }
    .formBtn{
        margin-left:150px;
        margin-top: 50px;
    }
    .idItem{
     display:none;   
    }
</style>

<div class="panel admin_default">
    <div class="demoTable">
        部门名称：
        <div class="layui-inline">
            <input class="layui-input" name="name" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
        <button class="layui-btn  addBtn">添加</button>

    </div>

    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>


</div>


{% endblock %} {% block footer %}
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>
<script>
    layui.use(['form', 'table', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        //方法级渲染
        table.render({
            elem: '#LAY_table_user',
            url: '/department/list',
            cols: [
                [{
                        field: 'id',
                        title: 'ID',
                        width: 150,
                        sort: true,
                        fixed: true
                    }, {
                        field: 'name',
                        title: '部门名称',
                        align: 'center',
                    }, {
                        field: 'director',
                        title: '主管',
                        sort: true
                    }, {
                        field: 'phone',
                        title: '联系方式',
                    }, {
                        field: 'createdAt',
                        title: '创建时间'
                    },
                    {
                        fixed: 'right',
                        title: '操作',
                        width: 178,
                        align: 'center',
                        toolbar: '#barDemo'
                    }
                ]
            ],
            id: 'testReload',
            page: true
        });

        var $ = layui.$,
            active = {
                reload: function () {
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                                name: demoReload.val()
                        
                        }
                    });
                }
            };

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听工具条   layer.alert('编辑行：<br>' + )
        table.on('tool(user)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确认删除此条数据', function (index) {
                    var delData = data;
                    $.post('/department/del',delData,function(res){
                   if(res.status==200){
                    obj.del();
                    layer.close(index);
                      
                    }       
				 })
                   
                });
            } else if (obj.event === 'edit') {
              let editFromData = data;
                layer.open({
                type: 1,
                title:'编辑',
                skin: 'layui-layer-molv', //样式类名
                closeBtn: 1, //不显示关闭按钮
                anim: 2,
                shadeClose: true, //开启遮罩关闭
                area: ['550px', '400px'], //宽高
                content: `	
                <form class="layui-form addFrom" lay-filter="editFrom">
                        <div class="layui-form-item  idItem" >
                                <label class="layui-form-label">id</label>
                                <div class="layui-input-block">
							<input type="text" name="id" required lay-verify="required" placeholder="部门名称" autocomplete="off" class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                                <label class="layui-form-label">部门名称：</label>
                                <div class="layui-input-block">
							<input type="text" name="name" required lay-verify="required" placeholder="部门名称" autocomplete="off" class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                                <label class="layui-form-label">主管：</label>
                                <div class="layui-input-block">
							<input type="text" name="director" required lay-verify="required" placeholder="主管" autocomplete="off" class="layui-input">
						</div>
                    </div>
                    <div class="layui-form-item">
                                <label class="layui-form-label">联系方式：</label>
                                <div class="layui-input-block">
							<input type="text" name="phone" required lay-verify="required" placeholder="联系方式" autocomplete="off" class="layui-input">
						</div>
                    </div>
                    
						<div class="layui-form-item formBtn">
							<div class="layui-inline">
								<button class="layui-btn " lay-submit lay-filter="edit">提交</button>
							</div>
							<div class="layui-inline">
								<button type="reset" class="layui-btn layui-btn-primary">取消</button>
							</div>
						</div>
					</form>`
            });
             form.val('editFrom', editFromData)
            }
        });
       //添加点击事件
        $(".addBtn").click(function () {
            layer.open({
                type: 1,
                title:'添加部门',
                skin: 'layui-layer-molv', //样式类名
                closeBtn: 1, //不显示关闭按钮
                anim: 2,
                shadeClose: true, //开启遮罩关闭
                area: ['550px', '400px'], //宽高
                content: `	
                <form class="layui-form addFrom">
                        <div class="layui-form-item">
                                <label class="layui-form-label">部门名称：</label>
                                <div class="layui-input-block">
							<input type="text" name="name" required lay-verify="required" placeholder="部门名称" autocomplete="off" class="layui-input">
                        </div>
                        </div>
                        <div class="layui-form-item">
                                <label class="layui-form-label">主管：</label>
                                <div class="layui-input-block">
							<input type="text" name="director" required lay-verify="required" placeholder="主管" autocomplete="off" class="layui-input">
						</div>
                    </div>
                    <div class="layui-form-item">
                                <label class="layui-form-label">联系方式：</label>
                                <div class="layui-input-block">
							<input type="text" name="phone" required lay-verify="required" placeholder="联系方式" autocomplete="off" class="layui-input">
						</div>
                    </div>
                    
						<div class="layui-form-item formBtn">
							<div class="layui-inline">
								<button class="layui-btn " lay-submit lay-filter="add">提交</button>
							</div>
							<div class="layui-inline">
								<button type="reset" class="layui-btn layui-btn-primary">取消</button>
							</div>
						</div>
					</form>`
            });
        });
        //监听表单添加提交事件
        form.on('submit(add)', function(data) {
            var formData  = data.field;
            $.post('/department/add',formData,function(res){
                   if(res.status!=200){
					layer.open({
					  title: '警告',
					  content: res.msg,
                         icon: 2,
                         skin: 'layer-ext-moon',
                         closeBtn:0
						}); 
                        return;   
                      
                    }
                      window.location.href='/department' 	
				 })
        return false;
        })
           //监听表单修改提交事件
           form.on('submit(edit)', function(data) {
            var formData  = data.field;
            $.post('/department/edit',formData,function(res){
                   if(res.status!=200){
					layer.open({
					  title: '警告',
					  content: res.msg,
                         icon: 2,
                         skin: 'layer-ext-moon',
                         closeBtn:0
						}); 
                        return;   
                      
                    }
                      window.location.href='/department' 	
				 })
        return false;
        })
    });
</script>
{% endblock %}